<template>
  <div class="historyRecord front-color">
    <h1>{{$t('myAdd.personal.hisRecord')}}</h1>
    <div class="block-header">
      <div class="tab_nav">
        <span @click="historyTab('login')" class="pointer" :class="historyTabClass === 'login' ? 'selected' : ''">{{$t('personal.historyLogin')}}</span>
        <span @click="historyTab('setting')" class="pointer" :class="historyTabClass === 'setting' ? 'selected' : ''">{{$t('personal.safeSetHistory')}}</span>
      </div>
    </div>
    <div class="history-table-box">
      <table class="table-content history-table" v-if="historyData.length > 0">
        <tbody>
        <template v-if='historyTabClass === "login"'>
          <tr class="titleTr">
            <th width="145" class="tr-left">{{$t('personal.loginTime')}}</th>
            <th class="tr-center">{{$t('personal.loginTerrace')}}</th>
            <th class="tr-center-r">{{$t('personal.loginIp')}}({{$t('personal.loginAddress')}})</th>
            <th class="tr-right">{{$t('personal.status')}}</th>
          </tr>
          <template v-for="(item, index) in historyData">
            <tr :class="{oddback: index%2 === 1}">
              <td width="145" class="tr-left">{{item.formatLgInTime}}</td>
              <td class="tr-center">{{item.lgPlatform}}</td>
              <td class="tr-center-r">{{item.lgIp}}</td>
              <td class="tr-right">{{handlelgStatus(item.lgStatus, '0')}}</td>
            </tr>
          </template>
        </template>
        <template v-else>
          <tr class="titleTr">
            <th width="145" class="tr-left">{{$t('personal.setTime')}}</th>
            <th class="tr-center-r">{{$t('personal.loginIp')}}({{$t('personal.loginAddress')}})</th>
            <th class="tr-center-r">{{$t('personal.setContet')}}</th>
          </tr>
          <template v-for="(item, index) in historyData">
            <tr :class="{oddback: index%2 === 1}">
              <td width="145" class="tr-left">{{item.formatCtime}}</td>
              <td class="tr-center-r">{{item.optIp}}</td>
              <td class="tr-center-r">{{handlelgStatus(item.optType ,'1')}}</td>
            </tr>
          </template>
        </template>
        </tbody>
      </table>
      <p v-else class="table_no_data">
        <span>{{$t('personal.notData')}}</span>
      </p>
    </div>
    <v-pagination v-if="(pagination.count/pagination.display) > 1"
                  :total="pagination.count"
                  :current-page='pagination.page'
                  :display='pagination.display'
                  @pagechange="pagechange($event)">
    </v-pagination>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import VPagination from '@/components/common/pagination'
export default {
  name: 'historyRecord',
  components: { VPagination },
  data () {
    return {
      historyTabClass: 'login',
      historyData: [],
      pagination: {
        count: 0,
        page: 1,
        display: 10
      }
    }
  },
  mounted () {
    this.getHistoryData(1)
  },
  computed: {
    ...mapState({
      userinfo ({baseData: {_user}}) {
        if (_user) {
          this.nickName = _user.nickName
          this.inviteQECode = _user.inviteQECode
          this.useFeeCoinOpen = _user.useFeeCoinOpen
        }
        return _user || false
      }
    })
  },
  methods: {
    historyTab (type) {
      this.historyData = []
      this.historyTabClass = type
      this.pagination.page = 1
      this.getHistoryData(1)
    },
    handlelgStatus (data, type) {
      if (type === '0') {
        if (data === 1) {
          return this.$t('personal.cussess')
        } else {
          return this.$t('personal.failure')
        }
      } else {
        switch (data) {
          case 1 :
            return this.$t('personal.historySetting_01')
          case 2 :
            return this.$t('personal.historySetting_02')
          case 3 :
            return this.$t('personal.historySetting_03')
          case 4 :
            return this.$t('personal.historySetting_04')
          case 5 :
            return this.$t('personal.historySetting_05')
          case 6 :
            return this.$t('personal.historySetting_06')
        }
      }
    },
    // 翻页点击事件
    pagechange (page) {
      this.pagination.page = page
      this.getHistoryData(page)
    },
    getHistoryData (page) {
      let ajaxUrl = this.$store.state.url.question.login_history
      if (this.historyTabClass === 'setting') {
        ajaxUrl = this.$store.state.url.question.setting_history
      }
      let data = {
        page: page,
        pageSize: 10,
        userId: this.userinfo.id
      }
      this.axios({
        url: ajaxUrl,
        headers: {},
        params: data,
        method: 'post'
      }).then((data) => {
        if (data.code === '0') {
          let dataList
          this.pagination.count = data.data.count
          if (this.historyTabClass === 'setting') {
            dataList = data.data.historySettingList
          } else {
            dataList = data.data.historyLoginList
          }
          this.historyData = dataList
        }
      })
    }
  }
}
</script>
